ARTICLE 達格觀點

網頁設計工具 - Google Fonts介紹及應用

本篇適合網頁設計初心者或是對網頁設計字型有興趣的任何人

 

以往網頁設計的過程中,字型的選擇不多,導致設計師使用了特定字體,但是網頁輸出後卻沒辦法在瀏覽器上呈現。

結果就變成想使用那個字體,整個網站都做成圖片檔,這會導致整個網站跑得很慢,還不利於SEO!因為瀏覽器抓取關鍵字是抓文字,都變成圖片,怎麼有辦法抓取得到呢?

字體開源的出現,解決了廣大網頁設計師的困擾。而今天要介紹的,就是最廣為大家使用的「Google Fonts」。

Google Fonts主要以英文字型為大宗。,因為開發中文字遠比英文難上許多。

你想想,英文只有26個字母,但是中文的常用就至少3000~5000左右呢!

 

值得一提的是Google跟Adobe於2015年共同發表了「Noto Sans TC 思源黑體」beta版,支援的範圍包括:繁體中文、日文以及韓文。可想而知,這對漢語為主的國家而言可是一大福音呢!

 

當然,除了中文字型的支援之外,Google Fonts還有三大值得推薦的原因:

 

2. 搜尋篩選功能,更快速找到自己需要的字型組合

3. 可下載字型檔案(.ttf)或嵌入網頁用

 

 

我們要怎麼從Google Fonts上使用字型呢?

步驟1:選擇要載入的字型

可利用右側選單做條件篩選,如:樣式、來源、語系...等等。

網頁設計

步驟2:選擇樣式並進行調整

可進行字體粗細、CSS的樣式設定,還能直接看到設定後的預覽效果,也可以下載在電腦觀看。

網頁設計

步驟3:將字型引用到HTML裡

網頁設計

 

結論

目前「Noto Sans TC 思源黑體」已於2018年底終於從beta版畢業,正式上架至Google Fonts。有興趣的人都可以在Google Fonts上,找到這款中文字型,並將它嵌入網頁中使用囉~是不是很方便呢?

Get in touch Get in touch
Get in touch Get in touch

想要啟動一個專案、獲得估價或只是提出一個問題?聯絡我們!

線上諮詢